<template>
	<view class="content">
		<view class="product_content">
			<image mode="widthFix" :src="item" v-for="(item,index) in imgs" :key="index" @click="preview('imgs',index)">
			</image>
		</view>
		<view class="bottom_box"></view>
		<view class="bottom">
			<view class="title">{{title}}</view>
			<view class="price">¥<text>{{price}}</text></view>
			<view class="original_price">¥ {{original_price}}</view>
			<view class="now_buy" @click="showno">立即购买</view>
		</view>
		<view class="queren_bg" v-show="shows" @click="showno(0)"></view>
		<view class="queren" v-show="shows" @click="showno(0)">
			<view class="queren_clo">x</view>
			<view class="queren_tit" style="text-align: center;">确认购买</view>
			<view class="queren_tit">商品: {{title}}</view>
			<view class="queren_tit">售价: ¥<text>{{price}}</text></view>
			<view v-if="!address&&pickupMethod==2" class="queren_but" @click="goAddress(0)">添加收货地址</view>
			<view v-if="address" class="queren_tit">收货地址: {{address}}<view class="queren_but" style="width: 180rpx;line-height: 50rpx;" @click="goAddress(1)">修改地址</view></view>
			<view v-if="address || pickupMethod!=2" class="queren_but" @click="showno(1)">立即购买</view>
		</view>
		<view class="tanc" v-show="paydialogShow">
			<image src="/static/img/clo.png" class="tancclo" @click="shgm()"></image>
			<view class="shuru">
				<text class="shuru_tit t1">支付方式</text>
				<view class="xuan_li t1" @click="types(1)" :class="[typen==1?'act':'']">
					<image src="/static/img/wx.png" mode="widthFix"></image>微信
				</view>
				<view class="xuan_li t1" @click="types(2)" :class="[typen==2?'act':'']">
					<image src="/static/img/zfb.png" mode="widthFix"></image>支付宝
				</view>
			</view>
			<view class="tuic t2" @click="goumai()">确定购买</view>
		</view>
	</view>
</template>

<script>
	// import common from '@/common.js';
	export default {
		data() {
			return {
				paydialogShow: false,
				typen: 1,
				id: 0,
				album: [],
				imgs: [],
				title: '',
				price: '0.00',
				original_price: '0.00',
				banner: '',
				name: '',
				address: '',
				tel: '',
				lat: '',
				lng: '',
				type: '',
				plat: '',
				shows: false,
				mainId:'',
				paid:false,
				pickupMethod:2,
				addressMsg: {}
			}
		},
		onLoad(e) {
			this.id = e.id;
			this.mainId = e.mainId;
			this.getAdSell()
		},
		onShow() {
			this.getUserAdress()
			if(this.paid){
				uni.navigateBack({
					delta:1
				})
			}
		},
		methods: {
			shgm() {
				if (this.paydialogShow == false) {
					this.paydialogShow = true
				} else {
					this.paydialogShow = false
				}
			},
			types(e) {
				this.typen = e;
			},
			getAdSell(){
				this.$request.get('ad/getAdSell/'+this.id,{id:this.id})
					.then(res =>{
					console.log("购买请求结果 res:",res)
					if (res.data.data) {
						if (res.data.data.pics) {
							var imgs = [];
							for (let i = 0; i < res.data.data.pics.length; i++) {
								// console.log(i)
								let pic = res.data.data.pics[i].domain + res.data.data.pics[i].localPath;
								imgs.push(pic)
							}
							this.imgs = imgs;
						}
						this.original_price = res.data.data.oriAmount / 100;
						this.title = res.data.data.name;
						this.price = res.data.data.amount / 100;
						this.pickupMethod = res.data.data.pickupMethod
					
					}
				}).catch(err=>{
					console.log(" err:",err)
				})
			},
			getUserAdress(){
				this.$request.post('user/queryShipInfo/'+this.mainId,{id:this.mainId})
					.then(res =>{
					console.log('查询收货地址：', res)
					if(res.data.status==200){
						if(res.data.data.length>0){
							this.address = res.data.data[res.data.data.length - 1].address;
							this.addressMsg = res.data.data[res.data.data.length - 1];
						}else{
							this.address = '';
							this.addressMsg = {};
						}
						console.log('this.address：',this.address)
					}
					console.log("this.address: ",this.address);
				}).catch(err=>{
					console.log("查询收货地址 err:",err)
				})
				
			},
			goAddress(flag){
				if(flag == 1){
					uni.setStorageSync('addressMssage', this.addressMsg);
				}else{
					uni.removeStorageSync('addressMssage');
				}
				uni.navigateTo({
					url:'/pages/user/address?id='+this.id+ '&flag=' + flag
				})
			},
			preview(type, current) {
				let that = this;
				uni.previewImage({
					current: current,
					urls: that[type]
				});
			},
			showno(e) {
				if (e == 1) {
					this.shows = false
					this.paydialogShow = true;
				} else if (e == 0) {
					this.shows = false
				} else {
					this.shows = true
				}
			},
			goumai(){
				this.toBuy()
			},
			toBuy() {
				let data = {
					adId: this.id, //		广告ID		true			 string
					num: 1, //		购买数量		false			 integer
					payType: this.typen, //		支付方式		true			 integer
					payerId: this.mainId, //		支付用户ID		true			 string
					plat: '1', //	购买平台
				}
				console.log('请求参数：',data)
				this.$request.post(`ad/buyAdSell`,data,'json')
					.then(res =>{
					console.log("订单信息:",res);
					if(res.data.status == 200){
						// 0 微信支付  1支付宝支付
						if(this.typen == 1){
							this.wxPay(res.data.data.third)
						}else{
							this.aliPay(res.data.data.third.body)
						}
					}else{
						uni.showToast({
							title: res.data.msg,
							icon: 'none',
							duration: 1000
						})
					}
				})
			},
			wxPay(orderInfo) {
				console.log("type: ",orderInfo);
				uni.requestPayment({
					provider: 'wxpay',
					orderInfo:orderInfo,
					success: res => {
						console.log("支付成功: ", res);
						uni.showToast({
							title: "支付成功",
							icon: 'none',
							duration: 1000
						})
						this.paid = true
						// 支付成功 确认购买广告订单
						// this.callbackBuyAd();
						uni.navigateBack({
							delta:1
						})
					},
					fail: err => {
						console.log("支付失败: ", err);
						uni.showToast({
							title: err.errMsg,
							icon: 'none',
							duration: 2000
						});
					}
				})
			},
			aliPay(orderInfo){
				console.log("orderInfoali",orderInfo);
				uni.requestPayment({
					provider: 'alipay',
					orderInfo: orderInfo,
					success: res => {
						uni.showToast({
							title: "支付成功",
							icon: 'none',
							duration: 1000
						})
						this.paid = true
						// 支付成功 确认购买广告订单
						// this.callbackBuyAd();
						uni.navigateBack({
							delta:1
						})
					},
					fail: err => {
						console.log("支付失败: ", err);
						uni.showToast({
							title: err.errMsg,
							icon: 'none',
							duration: 1000
						})
					}
				})
			},
			back(id) {
				let that = this;
				setTimeout(function() {
					common.request('ad/callbackBuyAdSell', {
						id: id
					}, function(res) {
						if (res) {
							common.toast('支付成功');
							uni.navigateTo({
								url: '/pages/user/ad_order_info?id=' + id
							})
						} else {
							that.back(id);
						}
					}, function(res) {
						console.log(res)
					}, '1')
				}, 500);
			},
			toCall() {
				let that = this;
				uni.makePhoneCall({
					phoneNumber: that.tel
				});
			},
			toLocation() {
				let that = this;
				console.log(that);
				uni.openLocation({
					latitude: Number(that.lat),
					longitude: Number(that.lng),
					name: that.name,
					address: that.address
				});
			}
		}
	}
</script>

<style>
	.queren_clo {
		width: 8vw;
		height: 8vw;
		border-radius: 50%;
		text-align: center;
		line-height: 8vw;
		background: #FFFFFF;
		color: #000;
		border: 1px solid #000;
		position: absolute;
		top: -4vw;
		right: -4vw;
	}

	.queren {
		width: 70vw;
		height: auto;
		padding: 4vw;
		background: #fff;
		border-radius: 2vw;
		box-shadow: 0px 0px 100vh #999;
		position: fixed;
		top: 50vh;
		margin-top: -20vw;
		left: 11vw;
		z-index: 9999;
	}

	.queren_tit {
		width: 100%;
		height: auto;
		line-height: 7vw;
		padding: 1vw 0;
		font-size: 30upx;
	}

	.top {
		width: 750upx;
		height: 750upx;
		position: relative;
	}

	.top swiper {
		width: 750upx;
		height: 750upx;
	}

	.top swiper image {
		width: 750upx;
		height: 750upx;
	}

	.info {
		padding: 21upx 24upx 18upx;
		background: #ffffff;
		margin-bottom: 20upx;
		position: relative;
	}

	.bottom .title {
		width: 690rpx;
		height: auto;
		padding: 30rpx;
		line-height: 50upx;
		overflow: hidden;
		font-size: 30upx;
		color: #333333;
		float: left;
		text-align: left;
	}

	.info .price {
		line-height: 75upx;
		height: 75upx;
		font-size: 34upx;
	}

	.info .price text {
		padding: 0 15upx 0 12upx;
		font-size: 46upx;
	}

	.info .original_price {
		text-decoration: line-through;
		font-size: 28upx;
		color: #999999;
		display: inline;
	}

	.shop {
		margin-top: 20upx;
		height: 106upx;
		background: #ffffff;
		padding: 30upx 24upx;
	}

	.shop image {
		float: left;
		width: 134upx;
		height: 106upx;
		border-radius: 10upx;
		margin-right: 23upx;
	}

	.shop .c {
		float: left;
		width: 330upx;
		height: 106upx;
	}

	.shop .name {
		float: left;
		width: 330upx;
		font-size: 28upx;
		height: 53upx;
		line-height: 53upx;
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;
	}

	.shop .address {
		float: left;
		width: 330upx;
		font-size: 26upx;
		height: 53upx;
		line-height: 53upx;
		color: #999999;
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;
	}

	.shop .address text {
		float: left;
		width: 30upx;
		font-size: 26upx;
		color: #FF0000;
	}

	.shop .r {
		float: right;
		width: 86upx;
		font-size: 20upx;
		line-height: 53upx;
		color: #999999;
		text-align: center;
	}

	.shop .r:last-child {
		margin-right: 20upx;
	}

	.shop .r text {
		display: block;
		font-size: 40upx;
	}

	.product_content {
		width: 100%;
		height: auto;
		float: left;
		line-height: 46upx;
		background: #ffffff;
		font-size: 26upx;
		margin-bottom: 215upx;
	}

	.product_content image {
		width: 100%;
		height: auto;
		float: left;
		margin: 0;
	}

	.bottom_box {
		height: 110upx;
		width: 100%;
	}

	.bottom {
		position: fixed;
		bottom: 0;
		left: 0;
		height: auto;
		line-height: 80upx;
		width: 100%;
		background: #ffffff;
		padding: 15upx 0;
		text-align: center;
		color: #ffffff;
		border-top: #f7f7f7 solid 1upx;
	}

	.bottom .price {
		float: left;
		font-size: 36upx;
		padding-left: 24upx;
		color: #000;
	}

	.bottom .price text {
		font-size: 46upx;
	}

	.bottom .original_price {
		float: left;
		padding-left: 24upx;
		color: #999999;
		text-decoration: line-through;
		font-size: 26upx;
	}

	.bottom .now_buy {
		background-color: #0e0b02;
		color: #E9A822;
		margin-right: 24upx;
		float: right;
		width: 310upx;
		border-radius: 40upx;
		font-size: 30upx;
	}

	.queren_but {
		background-color: #0e0b02;
		color: #E9A822;
		margin-right: 10vw;
		float: right;
		width: 50vw;
		line-height: 10vw;
		text-align: center;
		border-radius: 40upx;
		font-size: 30upx;
	}

	.queren_bg {
		width: 100%;
		height: 100vh;
		position: fixed;
		background: #000000;
		opacity: 0.5;
		top: 0;
		left: 0;
	}
	
	.tanc {
		width: 80vw;
		height: auto;
		position: fixed;
		top: 50%;
		left: 10vw;
		background: #fff;
		border-radius: 2vw;
		box-shadow: 0px 0px 20vw #999;
		padding: 4vw;
		z-index: 99999;
		margin-top: -75vw;
	}
	
	.tancclo {
		position: absolute;
		right: -4vw;
		top: -4vw;
		background: #F1C75E;
		width: 8vw;
		height: 8vw;
		padding: 2vw;
		border-radius: 8vw;
	}
	.shuru {
		width: 100%;
		height: auto;
		display: block;
		float: left;
		border-radius: 1vw;
		overflow: hidden;
		padding: 2vw 4vw;
		background: #fff;
		margin-top: 3vw;
		box-shadow: 0px 0px 5px #eee;
	}
	
	.shuru_tit {
		width: 30%;
		height: 10vw;
		line-height: 10vw;
		display: block;
		float: left;
	}
	
	.shuru_text {
		width: 60%;
		height: 10vw;
		line-height: 10vw;
		display: block;
		float: right;
		text-align: right;
	}
	.xuan_li {
		width: 100%;
		height: 10vw;
		line-height: 10vw;
		display: block;
		float: left;
		border: 1px solid #eee;
		border-radius: 2vw;
		margin: 2vw 0;
	}
	
	.xuan_li image {
		width: 6vw;
		height: auto;
		display: block;
		float: left;
		margin-top: 2vw;
		margin-left: 5vw;
		margin-right: 2vw;
	}
	
	.act {
		/* background: #F1C75E; */
		border: 1px solid #F1C75E;
		color: #F1C75E;
	}
</style>
